document.addEventListener('DOMContentLoaded', function() {
    // 检测mPaaS环境并初始化JSBridge
    const isMPaaS = typeof AlipayJSBridge !== 'undefined';
    console.log('isMPaaS初始化效果=' ,isMPaaS);
    if (isMPaaS) {
        // 设置标题
        AlipayJSBridge.call('setTitle', {
            title: 'AI助理'
        });
    }

    // DOM 元素
    const chatContainer = document.querySelector('.chat-container');
    const voiceInputArea = document.getElementById('voiceInputArea');
    const textInputWrapper = document.getElementById('textInputWrapper');
    const keyboardToggle = document.getElementById('keyboardToggle');
    const userInput = document.getElementById('userInput');
    const sendButton = document.getElementById('sendButton');
    const recordingIndicator = document.querySelector('.recording-indicator');
    const newConversationBtn = document.querySelector('.new-conversation-btn');
    const reloadBtn = document.querySelector('.reload-btn');
    const toggleHeaderBtn = document.querySelector('.toggle-header-btn');
    const headerCollapsible = document.querySelector('.header-collapsible');
    const quickReplyToggle = document.getElementById('quickReplyToggle');
    
    // 测试滚动功能
    console.log('聊天容器高度:', chatContainer.clientHeight);
    console.log('聊天容器滚动高度:', chatContainer.scrollHeight);
    console.log('聊天容器可滚动状态:', getComputedStyle(chatContainer).overflowY);
    
    // 手动触发滚动测试
    const testScroll = () => {
        chatContainer.scrollTop = 0;
        console.log('重置滚动位置为顶部');
        setTimeout(() => {
            chatContainer.scrollTop = chatContainer.scrollHeight;
            console.log('滚动到底部, 新位置:', chatContainer.scrollTop);
        }, 500);
    };
    
    // 添加滚动监听器，用于调试
    chatContainer.addEventListener('scroll', () => {
        console.log('滚动事件触发, 位置:', chatContainer.scrollTop);
    });
    
    // 状态变量
    let isRecording = false;
    let sessionId = null;
    let recorder = null;
    let audioContext = null;
    let audioStream = null;
    let isVoiceInputMode = true;
    
    // 设置事件监听器
    function setupEventListeners() {
        // 语音输入区域事件
        voiceInputArea.addEventListener('touchstart', startRecording);
        voiceInputArea.addEventListener('touchend', stopRecording);
        voiceInputArea.addEventListener('mousedown', startRecording);
        voiceInputArea.addEventListener('mouseup', stopRecording);
        voiceInputArea.addEventListener('mouseleave', stopRecording);
        
        // 文本输入事件
        sendButton.addEventListener('click', sendTextMessage);
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendTextMessage();
            }
        });
        
        // 输入模式切换
        keyboardToggle.addEventListener('click', toggleInputMode);
        
        // 其他按钮事件
        if (newConversationBtn) {
            newConversationBtn.addEventListener('click', () => {
                if (confirm('确认开始新对话？当前对话历史将被清除。')) {
                    chatContainer.innerHTML = '';
                    initChat();
                }
            });
        }
        
        if (reloadBtn) {
            reloadBtn.addEventListener('click', () => location.reload());
        }
        
        if (toggleHeaderBtn) {
            toggleHeaderBtn.addEventListener('click', () => {
                headerCollapsible.classList.toggle('open');
                const icon = toggleHeaderBtn.querySelector('i');
                icon.classList.toggle('fa-chevron-down');
                icon.classList.toggle('fa-chevron-up');
            });
        }
    }
    
    // 切换输入模式
    function toggleInputMode() {
        isVoiceInputMode = !isVoiceInputMode;
        
        if (isVoiceInputMode) {
            voiceInputArea.style.display = 'flex';
            textInputWrapper.style.display = 'none';
            keyboardToggle.innerHTML = '<img src="/static/icon/keyboard.png" alt="键盘" class="input-icon">';
        } else {
            voiceInputArea.style.display = 'none';
            textInputWrapper.style.display = 'flex';
            keyboardToggle.innerHTML = '<img src="/static/icon/aiinput.png" alt="语音" class="input-icon">';
            userInput.focus();
        }
    }
    
    // 开始录音
    function startRecording(e) {
        e.preventDefault();
        
        if (isRecording) return;
        
        voiceInputArea.classList.add('recording');
        recordingIndicator.classList.add('active');
        isRecording = true;
        
        // 获取音频流并开始录制
        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(stream => {
                audioStream = stream;
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
                recorder = new MediaRecorder(stream);
                
                const audioChunks = [];
                
                recorder.ondataavailable = e => {
                    audioChunks.push(e.data);
                };
                
                recorder.onstop = () => {
                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                    uploadRecording(audioBlob);
                };
                
                recorder.start();
                console.log('开始录音...');
            })
            .catch(error => {
                console.error('获取麦克风权限失败:', error);
                alert('无法访问麦克风，请检查权限设置');
                resetRecordingState();
            });
    }
    
    // 停止录音
    function stopRecording(e) {
        e.preventDefault();
        
        if (!isRecording) return;
        
        resetRecordingState();
        
        if (recorder && recorder.state === 'recording') {
            recorder.stop();
        }
        
        if (audioStream) {
            audioStream.getTracks().forEach(track => track.stop());
        }
    }
    
    // 重置录音状态
    function resetRecordingState() {
        voiceInputArea.classList.remove('recording');
        recordingIndicator.classList.remove('active');
        isRecording = false;
    }
    
    // 上传录音
    function uploadRecording(audioBlob) {
        // 创建FormData对象
        const formData = new FormData();
        formData.append('audio', audioBlob, 'recording.wav');
        
        // 为上传创建唯一ID
        const uploadId = Date.now().toString();
        
        // 添加用户语音消息（加载中状态）
        addMessage('user', `<div class="loading-message" data-id="${uploadId}">语音输入中 <div class="loading"></div></div>`, true);
        
        // 上传音频文件
        fetch('/upload_audio', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 获取文件路径，然后调用转换API
                convertAudio(data.audio_url);
            } else {
                handleError('上传录音失败');
            }
        })
        .catch(error => {
            console.error('上传录音出错:', error);
            handleError('上传录音出错');
        });
    }
    
    // 转换音频为文本
    function convertAudio(audio_url) {
        fetch('/convert_audio', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ audio_url: audio_url })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('服务器响应错误: ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            // 先移除加载中消息
            removeLoadingMessage();
            
            if (data.success && data.text) {
                console.log('识别结果:', data.text);
                
                // 仅当启用了显示识别文本选项时才显示
                if (quickReplyToggle && quickReplyToggle.checked) {
                    // 添加用户消息（显示识别文本）
                    addMessage('user', data.text);
                    // 处理查询
                    processUserQuery(data.text);
                } else {
                    // 不显示识别文本，直接处理查询
                    processUserQuery(data.text);
                }
            } else {
                handleError(data.error || '语音识别失败');
            }
        })
        .catch(error => {
            console.error('语音识别处理错误:', error);
            removeLoadingMessage();
            addMessage('system', '抱歉，语音识别失败，请重试或使用文本输入。');
        });
    }
    
    // 发送文本消息
    function sendTextMessage() {
        const message = userInput.value.trim();
        
        if (!message) return;
        
        addMessage('user', message);
        processUserQuery(message);
        userInput.value = '';
    }
    
    // 处理用户查询
    function processUserQuery(query) {
        // 为每个查询创建唯一的消息ID
        const messageId = Date.now().toString();
        
        // 显示加载中消息
        addMessage('system', `<div class="loading-message" data-id="${messageId}">正在查询相关功能... <div class="loading"></div></div>`, true);
        
        // 发送查询请求
        fetch('/get_menu', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                text: query,
                session_id: sessionId
            })
        })
        .then(response => response.json())
        .then(data => {
            // 确保移除该查询的加载消息
            removeLoadingMessage();
            
            if (data.success) {
                // 更新会话ID
                sessionId = data.session_id;
                
                if (data.needMore) {
                    // 如果需要更多信息，显示文本消息
                    const message = data.message || '请提供更详细的描述';
                    addMessage('system', `<div class="text-message">${message}</div>`);
                } else if (data.result) {
                    // 有明确的功能菜单结果
                    // 获取消息文本 - 优先使用顶层message，如果没有则使用result内的message
                    const messageText = data.message || (data.result.message || null);
                    
                    // 显示菜单结果（包含文本消息）
                    displayMenuResult(data.result, messageText);
                } else {
                    // 无法找到明确的功能菜单
                    const message = data.message || '抱歉，未能找到相关功能菜单';
                    addMessage('system', `<div class="text-message">${message}</div>`);
                }
            } else {
                // 处理错误
                addMessage('system', `抱歉，查询时遇到问题：${data.error || '未知错误'}`);
            }
        })
        .catch(error => {
            console.error('查询处理错误:', error);
            removeLoadingMessage();
            addMessage('system', '查询失败，请稍后再试');
        });
    }
    
    // 显示菜单结果
    function displayMenuResult(result, messageText) {
        console.log('显示菜单结果:', result);
        
        let contentHTML = '';
        
        // 如果有消息文本，添加到内容的顶部
        if (messageText) {
            contentHTML += `<div class="text-message">${messageText}</div>`;
        }
        
        // 添加菜单卡片
        contentHTML += `
            <div class="menu-result">
                <div class="menu-title">${result.menuName || '菜单功能'}</div>
                <div class="menu-description">${result.description || result.menuDescription || '点击下方按钮访问功能'}</div>
                <a href="javascript:void(0)" class="menu-button" data-url="${result.menuUrl}">${result.menuName || '前往功能页面'}</a>
            </div>
        `;
        
        // 添加单个消息，包含文本和菜单卡片
        // 注意：我们不在HTML中添加反馈按钮，而是通过addMessage函数自动添加
        addMessage('system', contentHTML);
        
        // 使用setTimeout确保DOM元素已经渲染完成
        setTimeout(() => {
            // 获取所有新添加的菜单按钮
            const menuButtons = document.querySelectorAll('.menu-button[data-url]');
            console.log('找到菜单按钮数量:', menuButtons.length);
            
            // 为每个按钮添加点击事件
            menuButtons.forEach(button => {
                // 移除已有的点击事件（防止重复绑定）
                button.removeEventListener('click', handleMenuButtonClick);
                // 添加新的点击事件
                button.addEventListener('click', handleMenuButtonClick);
            });
        }, 100);
    }
    
    // 处理菜单按钮点击
    function handleMenuButtonClick(e) {
        e.preventDefault();
        
        // 获取URL和参数
        const url = this.getAttribute('data-url');
        const params = {}; // 从按钮获取参数数据是比较困难的，这里简化处理
        
        // 调试输出
        console.log('点击菜单按钮, URL:', url, '参数:', params);
        
        if (isMPaaS) {
            // mPaaS环境，使用JSBridge处理
            if (url && url.startsWith('mpaas://')) {
                // 处理离线包
                console.log('调用mPaaS应用:', url.replace('mpaas://', ''));
                try {
                    AlipayJSBridge.call('openApp', {
                        appId: url.replace('mpaas://', ''),
                        param: params
                    }, function(result) {
                        if (!result.success) {
                            console.error('打开mPaaS应用失败:', result);
                            alert('打开功能失败: ' + (result.error || '未知错误'));
                        }
                    });
                } catch (error) {
                    console.error('调用AlipayJSBridge出错:', error);
                    alert('调用功能时出错: ' + error.message);
                    // 失败后尝试直接打开
                    window.open(url, '_blank');
                }
            } else if (url && url.startsWith('native://')) {
                // 处理原生功能
                try {
                    AlipayJSBridge.call('callNative', {
                        func: url.replace('native://', ''),
                        params: params
                    }, function(result) {
                        if (!result.success) {
                            console.error('调用原生功能失败:', result);
                            alert('功能调用失败: ' + (result.error || '未知错误'));
                        }
                    });
                } catch (error) {
                    console.error('调用AlipayJSBridge出错:', error);
                    alert('调用功能时出错: ' + error.message);
                    // 失败后尝试打开浏览器
                    window.open(url, '_blank');
                }
            } else {
                // 处理普通URL
                try {
                    console.log('在mPaaS中打开浏览器:', url);
                    AlipayJSBridge.call('openInBrowser', {
                        url: url
                    });
                } catch (error) {
                    console.error('打开浏览器失败:', error);
                    // 降级处理：使用普通方式打开
                    window.open(url, '_blank');
                }
            }
        } else {
            // 非mPaaS环境，模拟或直接打开URL
            if (url && (url.startsWith('mpaas://') || url.startsWith('native://'))) {
                // 模拟mPaaS环境
                console.log('模拟mPaaS调用:', url);
                alert('模拟调用功能: ' + url + '\n参数: ' + JSON.stringify(params));
            } else if (url) {
                // 普通URL直接打开
                console.log('直接打开URL:', url);
                window.open(url, '_blank');
            } else {
                console.error('菜单URL为空');
                alert('无法打开功能，链接无效');
            }
        }
    }
    
    // 滚动到底部的方法，确保能正确滚动
    function scrollToBottom() {
        if (chatContainer) {
            // 立即滚动一次
            chatContainer.scrollTop = chatContainer.scrollHeight;
            
            // 然后再延迟滚动一次，确保新内容渲染后能滚到底部
            setTimeout(() => {
                chatContainer.scrollTop = chatContainer.scrollHeight;
                console.log('执行滚动, 滚动高度:', chatContainer.scrollHeight, '当前位置:', chatContainer.scrollTop);
            }, 100);
        }
    }
    
    // 添加消息到聊天界面
    function addMessage(type, content, isLoading = false) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${type}`;
        
        const messageHeader = document.createElement('div');
        messageHeader.className = 'message-header';
        messageHeader.textContent = type === 'user' ? '您' : '助手';
        
        const messageContent = document.createElement('div');
        messageContent.className = 'message-content';
        messageContent.innerHTML = content;
        
        if (isLoading) {
            messageContent.classList.add('loading-message');
        }
        
        messageDiv.appendChild(messageHeader);
        messageDiv.appendChild(messageContent);
        
        // 如果是系统消息且不是加载中状态，添加点赞和踩按钮
        if (type === 'system' && !isLoading) {
            const feedbackButtons = document.createElement('div');
            feedbackButtons.className = 'feedback-buttons';
            
            // 添加点赞按钮
            const likeButton = document.createElement('button');
            likeButton.className = 'feedback-button like-button';
            likeButton.title = '有帮助';
            likeButton.innerHTML = `<img src="/static/icon/good.png" alt="有帮助">`;
            
            // 添加踩按钮
            const dislikeButton = document.createElement('button');
            dislikeButton.className = 'feedback-button dislike-button';
            dislikeButton.title = '没帮助';
            dislikeButton.innerHTML = `<img src="/static/icon/bad.png" alt="没帮助">`;
            
            // 添加点击事件
            likeButton.addEventListener('click', function() {
                // 清除其他按钮的active状态
                dislikeButton.classList.remove('active');
                // 切换当前按钮的active状态
                this.classList.toggle('active');
                // 这里仅做展示，不发送请求
                console.log('用户点赞了消息');
            });
            
            dislikeButton.addEventListener('click', function() {
                // 清除其他按钮的active状态
                likeButton.classList.remove('active');
                // 切换当前按钮的active状态
                this.classList.toggle('active');
                // 这里仅做展示，不发送请求
                console.log('用户踩了消息');
            });
            
            // 将按钮添加到feedback容器
            feedbackButtons.appendChild(likeButton);
            feedbackButtons.appendChild(dislikeButton);
            
            // 将feedback容器添加到消息div
            messageDiv.appendChild(feedbackButtons);
        }
        
        chatContainer.appendChild(messageDiv);
        
        // 使用改进的滚动方法
        scrollToBottom();
    }
    
    // 删除加载中的消息内容
    function removeLoadingMessage() {
        const loadingMessages = document.querySelectorAll('.loading-message');
        if (loadingMessages.length > 0) {
            // 获取最后一个加载消息的父元素（整个消息容器）
            const lastLoadingMessage = loadingMessages[loadingMessages.length - 1];
            const messageDiv = lastLoadingMessage.closest('.message');
            
            // 直接删除整个消息元素，而不保留空消息结构
            if (messageDiv) {
                messageDiv.remove();
            }
        }
    }
    
    // 处理错误
    function handleError(message) {
        console.error('错误:', message);
        // 先确保移除加载消息
        removeLoadingMessage();
        // 然后添加错误消息
        addMessage('system', `抱歉，出现了问题：${message}。请重试或使用文本输入。`);
    }
    
    // 显示欢迎消息
    function showWelcomeMessage() {
        addMessage('system', `
            <div class="welcome-message">
                <div class="welcome-title">👋 您好！欢迎使用AI助手</div>
                <p>我是您的专属助理，有任何问题都可以随时向我咨询，请问有什么可以帮到您的吗？</p>
<!--          <div class="quick-buttons">
//                    <button class="quick-button" data-query="账户余额">账户余额</button>
//                    <button class="quick-button" data-query="账单查询">账单查询</button>
//                    <button class="quick-button" data-query="消费记录">消费记录</button>
//                    <button class="quick-button" data-query="我要转账">我要转账</button>
                </div> -->
            </div>
        `);
        
        // 设置快捷按钮点击事件
        setupQuickButtons();
    }
    
    // 设置快捷按钮点击事件
    function setupQuickButtons() {
        const quickButtons = document.querySelectorAll('.quick-button');
        quickButtons.forEach(button => {
            button.addEventListener('click', () => {
                const query = button.getAttribute('data-query');
                addMessage('user', query);
                processUserQuery(query);
            });
        });
    }
    
    // 初始化聊天界面
    function initChat() {
        // 添加欢迎消息
        showWelcomeMessage();
        
        // 重置会话ID
        sessionId = null;
        
        // 确保滚动到底部
        scrollToBottom();
    }
    
    // 防止安卓键盘顶起布局
    function handleResize() {
        document.documentElement.style.height = `${window.innerHeight}px`;
        document.body.style.height = `${window.innerHeight}px`;
        document.querySelector('.app-container').style.height = `${window.innerHeight}px`;
        
        // 重新调整滚动位置
        scrollToBottom();
    }
    
    window.addEventListener('resize', handleResize);
    handleResize();
    
    // 初始设置为语音输入模式
    textInputWrapper.style.display = 'none';
    voiceInputArea.style.display = 'flex';
    
    // 设置事件监听器
    setupEventListeners();
    
    // 初始化聊天界面
    initChat();
    
    // 在初始化完成后触发一次测试滚动
    setTimeout(testScroll, 1000);
}); 